import "react-diff-view/style/index.css";
import { diffJson } from "diff";
import { parseDiff, Diff, HunkData, getChangeKey } from "react-diff-view";
import { schemaElementSchema } from "./jiaoyan";
import { getNewLineNumber } from "./tool";
const schemaOld = {
  display: true,
  editable: "",
  elements: [
    {
      display: true,
      displayName: "法定代表人信息",
      displayNameKey: "MERCHANT_ONBOARDING_CN_COMPANY_Z40.legalContainer.name",
      editable: "",
      elements: [
        {
          display: true,
          displayName: "法定代表人信息",
          displayNameKey:
            "MERCHANT_ONBOARDING_CN_COMPANY_Z40.legalCardContainer.name",
          editable: true,
          elementName: "legalRepresentative",
          elements: [
            {
              display: true,
              editable: true,
              elements: [
                {
                  display: true,
                  editable: true,
                  elements: [
                    {
                      display: true,
                      editable: true,
                      elements: [
                        {
                          display: true,
                          displayName: "法定代表人姓名",
                          displayNameKey:
                            "MERCHANT_ONBOARDING_CN_COMPANY_Z40.individualLegalName.name",
                          editable: true,
                          elementName: "individualLegalName",
                          required: true,
                          tempHidden: false,
                          visible: true,
                        },
                      ],
                      required: false,
                      tempHidden: false,
                      uiInfos: {
                        leaf: false,
                        list: false,
                        uiType: "LayoutContainer",
                        viewOnly: false,
                      },
                      visible: true,
                    },
                    {
                      display: true,
                      editable: true,
                      elements: [
                        {
                          display: false,
                          editable: true,
                          elementName: "individualEnglishLegalName",
                          required: true,
                          tempHidden: false,
                          visible: true,
                        },
                      ],
                      required: false,
                      tempHidden: false,
                      uiInfos: {
                        extraProps: {
                          patten: "grid",
                          value: [24, 24],
                        },
                        leaf: false,
                        list: false,
                        uiType: "LayoutContainer",
                        viewOnly: false,
                      },
                      visible: true,
                    },
                  ],
                  required: false,
                  tempHidden: false,
                  uiInfos: {
                    leaf: false,
                    list: false,
                    uiType: "BlankContainer",
                    viewOnly: false,
                  },
                  visible: true,
                },
              ],
              required: false,
              tempHidden: false,
              uiInfos: {
                extraProps: {
                  patten: "fix",
                  interval: 24,
                  value: ["auto", "full"],
                },
                leaf: false,
                list: false,
                uiType: "LayoutContainer",
                viewOnly: false,
              },
              visible: true,
            },
          ],
          required: false,
          restriction: {
            maxCount: 1,
            minCount: 1,
            restrictionType: "LIST_RESTRICTION",
          },
          tempHidden: false,
          uiInfos: {
            leaf: false,
            list: true,
            uiType: "ArrayCardContainer",
            viewOnly: false,
          },
          visible: true,
        },
      ],
      required: false,
      tempHidden: false,
      uiInfos: {
        leaf: false,
        list: false,
        placeholder: "请提供企业的法定代表人身份信息",
        placeholderKey:
          "MERCHANT_ONBOARDING_CN_COMPANY_Z40.legalContainer.placeholder",
        uiType: "TitleContainer",
        viewOnly: false,
      },
      visible: true,
    },
    {
      display: true,
      displayName: "最终受益人（股东）",
      displayNameKey:
        "MERCHANT_ONBOARDING_CN_COMPANY_Z40.ShareholderContainer.name",
      editable: true,
      elementName: "uboContainer",
      elements: [
        {
          display: true,
          editable: true,
          elements: [
            {
              display: true,
              editable: true,
              elements: [
                {
                  display: true,
                  displayName: "公司是否有持股比例≥25%的股东？",
                  displayNameKey:
                    "MERCHANT_ONBOARDING_CN_COMPANY_Z40.moduleExtension-hasUbo.name",
                  editable: true,
                  elementName: "moduleExtension-hasUbo",
                  required: true,
                  tempHidden: false,
                  uiInfos: {
                    leaf: true,
                    list: false,
                    tips: "需填写持股比例大于等于25%的个人股东信息，若法定代表人100%持股，也需要填写。",
                    tipsKey:
                      "MERCHANT_ONBOARDING_CN_COMPANY_Z40.moduleExtension-hasUbo.tips",
                    uiType: "RADIO",
                    viewOnly: false,
                  },
                  visible: true,
                },
                {
                  display: false,
                  editable: true,
                  elementName: "isLegalAsShareholder",
                  required: true,
                  tempHidden: true,
                  uiInfos: {
                    leaf: true,
                    list: false,
                    tips: "法定代表人持股比例大于等于25%以上也需要填写",
                    tipsKey:
                      "MERCHANT_ONBOARDING_CN_COMPANY_Z40.isLegalAsShareholder.tips",
                    uiType: "RADIO",
                    viewOnly: false,
                  },
                  visible: true,
                },
              ],
              required: false,
              tempHidden: false,
              uiInfos: {
                leaf: false,
                list: false,
                uiType: "LayoutContainer",
                viewOnly: false,
              },
              visible: true,
            },
          ],
          required: "",
          tempHidden: false,
          uiInfos: {
            leaf: false,
            list: false,
            uiType: true,
            viewOnly: false,
          },
          visible: true,
        },
        {
          display: true,
          editable: "",
          elementName: "ubo",
          elements: [
            {
              display: true,
              editable: true,
              elements: [
                {
                  display: true,
                  displayName: "请上传证件",
                  displayNameKey:
                    "MERCHANT_ONBOARDING_CN_COMPANY_Z40.individualIdCopy.name",
                  editable: true,
                  elementName: "individualIdCopy",
                  required: true,
                  tempHidden: true,
                  uiInfos: {
                    leaf: true,
                    list: false,
                    requiredTips: "请上传身份证件照片",
                    requiredTipsKey:
                      "MERCHANT_ONBOARDING_CN_COMPANY_Z40.individualIdCopy.requiredTips",
                    uiType: "NEW_UPLOAD_OCR",
                    viewOnly: false,
                  },
                  visible: true,
                },
              ],
              required: false,
              tempHidden: false,
              visible: true,
            },
          ],
          required: false,
          tempHidden: false,
          visible: true,
        },
      ],
      required: false,
      tempHidden: false,
      visible: true,
    },
  ],
  required: false,
  tempHidden: false,
  uiInfos: {
    leaf: false,
    list: false,
    uiType: "BlankContainer",
    viewOnly: false,
  },
  visible: true,
};
const schemaNew = {
  display: true,
  editable: "",
  elements: [
    {
      display: true,
      displayName: "法定代表人信息",
      displayNameKey: "MERCHANT_ONBOARDING_CN_COMPANY_Z40.legalContainer.name",
      editable: "",
      elements: [
        {
          display: true,
          displayName: "法定代表人信息",
          displayNameKey:
            "MERCHANT_ONBOARDING_CN_COMPANY_Z40.legalCardContainer.name",
          editable: true,
          elementName: "legalRepresentative",
          elements: [
            {
              display: true,
              editable: true,
              elements: [
                {
                  display: true,
                  editable: true,
                  elements: [
                    {
                      display: true,
                      editable: true,
                      elements: [
                        {
                          display: true,
                          displayName: "法定代表人姓名",
                          displayNameKey:
                            "MERCHANT_ONBOARDING_CN_COMPANY_Z40.individualLegalName.name",
                          editable: true,
                          elementName: "individualLegalName",
                          required: true,
                          tempHidden: false,
                          visible: true,
                        },
                      ],
                      required: false,
                      tempHidden: false,
                      uiInfos: {
                        leaf: false,
                        list: false,
                        uiType: "LayoutContainer",
                        viewOnly: false,
                      },
                      visible: true,
                    },
                    {
                      display: true,
                      editable: true,
                      elements: [
                        {
                          display: false,
                          editable: true,
                          elementName: "individualEnglishLegalName",
                          required: true,
                          tempHidden: false,
                          visible: true,
                        },
                      ],
                      required: false,
                      tempHidden: false,
                      uiInfos: {
                        extraProps: {
                          patten: "grid",
                          value: [24, 24],
                        },
                        leaf: false,
                        list: false,
                        uiType: "LayoutContainer",
                        viewOnly: false,
                      },
                      visible: true,
                    },
                  ],
                  required: false,
                  tempHidden: false,
                  uiInfos: {
                    leaf: false,
                    list: false,
                    uiType: "BlankContainer",
                    viewOnly: false,
                  },
                  visible: true,
                },
              ],
              required: false,
              tempHidden: false,
              uiInfos: {
                extraProps: {
                  patten: "fix",
                  interval: 24,
                  value: ["auto", "full"],
                },
                leaf: false,
                list: false,
                uiType: "LayoutContainer",
                viewOnly: false,
              },
              visible: true,
            },
          ],
          required: false,
          restriction: {
            maxCount: 1,
            minCount: 1,
            restrictionType: "LIST_RESTRICTION",
          },
          tempHidden: false,
          uiInfos: {
            leaf: false,
            list: true,
            uiType: "ArrayCardContainer",
            viewOnly: false,
          },
          visible: true,
        },
      ],
      required: false,
      tempHidden: false,
      uiInfos: {
        leaf: false,
        list: false,
        placeholder: "请提供企业的法定代表人身份信息",
        placeholderKey:
          "MERCHANT_ONBOARDING_CN_COMPANY_Z40.legalContainer.placeholder",
        uiType: "TitleContainer",
        viewOnly: false,
      },
      visible: true,
    },
    {
      display: true,
      displayName: "最终受益人（股东）",
      displayNameKey:
        "MERCHANT_ONBOARDING_CN_COMPANY_Z40.ShareholderContainer.name",
      editable: true,
      elementName: "uboContainer",
      elements: [
        {
          display: true,
          editable: true,
          elements: [
            {
              display: true,
              editable: true,
              elements: [
                {
                  display: true,
                  displayName: "公司是否有持股比例≥25%的股东？",
                  displayNameKey:
                    "MERCHANT_ONBOARDING_CN_COMPANY_Z40.moduleExtension-hasUbo.name",
                  editable: true,
                  elementName: "moduleExtension-hasUbo",
                  required: true,
                  tempHidden: false,
                  uiInfos: {
                    leaf: true,
                    list: false,
                    tips: "需填写持股比例大于等于25%的个人股东信息，若法定代表人100%持股，也需要填写。",
                    tipsKey:
                      "MERCHANT_ONBOARDING_CN_COMPANY_Z40.moduleExtension-hasUbo.tips",
                    uiType: "RADIO",
                    viewOnly: false,
                  },
                  visible: true,
                },
                {
                  display: false,
                  editable: true,
                  elementName: "isLegalAsShareholder",
                  required: true,
                  tempHidden: true,
                  uiInfos: {
                    leaf: true,
                    list: false,
                    tips: "法定代表人持股比例大于等于25%以上也需要填写",
                    tipsKey:
                      "MERCHANT_ONBOARDING_CN_COMPANY_Z40.isLegalAsShareholder.tips",
                    uiType: "RADIO",
                    viewOnly: false,
                  },
                  visible: true,
                },
              ],
              required: false,
              tempHidden: false,
              uiInfos: {
                leaf: false,
                list: false,
                uiType: "LayoutContainer",
                viewOnly: false,
              },
              visible: true,
            },
          ],
          required: "",
          tempHidden: false,
          uiInfos: {
            leaf: false,
            list: false,
            uiType: true,
            viewOnly: false,
          },
          visible: true,
        },
        {
          display: true,
          editable: "",
          elementName: "ubo",
          elements: [
            {
              display: true,
              editable: true,
              elements: [
                {
                  display: true,
                  displayName: "请上传证件",
                  displayNameKey:
                    "MERCHANT_ONBOARDING_CN_COMPANY_Z40.individualIdCopy.name",
                  editable: true,
                  elementName: "individualIdCopy",
                  required: true,
                  tempHidden: true,
                  uiInfos: {
                    leaf: true,
                    list: false,
                    requiredTips: "请上传身份证件照片",
                    requiredTipsKey:
                      "MERCHANT_ONBOARDING_CN_COMPANY_Z40.individualIdCopy.requiredTips",
                    uiType: "NEW_UPLOAD_OCR",
                    viewOnly: false,
                  },
                  visible: true,
                },
              ],
              required: false,
              tempHidden: false,
              visible: true,
            },
          ],
          required: false,
          tempHidden: false,
          visible: true,
        },
      ],
      required: false,
      tempHidden: false,
      visible: true,
    },
  ],
  required: false,
  tempHidden: false,
  uiInfos: {
    leaf: false,
    list: false,
    uiType: "BlankContainer",
    viewOnly: false,
  },
  visible: true,
};

const commentsTest = [
  { key: "N1", tab: "error", content: "N1" },
  { key: "I4", tab: "warning", content: "I4" },
  { key: "N4", tab: "warning", content: "N4" },
  { key: "N5", tab: "error", content: "N5" },
  { key: "N6", tab: "warning", content: "N6" },
  { key: "D7", tab: "error", content: "D7" },
  { key: "I8", tab: "warning", content: "I8" },
  { key: "N8", tab: "error", content: "N8" },
];
function App() {
  const oldJson = JSON.stringify(schemaOld, null, 2);
  const newJson = JSON.stringify(schemaNew, null, 2);
  const show = false;
  const comments = commentsTest;
  const diffText = () => {
    const diffTextLines = [
      "--- a/file.json",
      "+++ b/file.json",
      `@@ -1,${oldJson.split("\n").length} +1,${newJson.split("\n").length} @@`,
    ];

    const diffs = diffJson(oldJson, newJson);
    diffs.forEach((part: any) => {
      const type = part.added ? "+" : part.removed ? "-" : " ";
      const lines = part.value.split("\n");
      lines.forEach((line: string, index: number) => {
        if (line?.trim() !== "" || index !== lines.length - 1) {
          diffTextLines.push(type + line);
        }
      });
    });
    // 返回合并的结果
    return diffTextLines.join("\n");
  };

  const files = parseDiff(diffText());
  const errors: { path: string; message: string }[] = [];
  try {
    const { error } = schemaElementSchema.validate(schemaNew, {
      abortEarly: false,
    });
    error?.details.forEach((err) => {
      const fieldPath = err.path?.join(".");
      errors.push({ path: fieldPath, message: err.message });
    });
  } catch (error) {
    console.log(error);
  }

  const getWidgets = (hunks: HunkData[]) => {
    const changes = hunks.reduce<HunkData["changes"]>(
      (result, { changes }) => [...result, ...changes],
      [] as HunkData["changes"]
    );

    const widgets: { [key: string]: any } = {};

    errors.forEach((error) => {
      const lineNumber = getNewLineNumber(changes as any, error.path);
      console.log(error.path);
      console.log(lineNumber);
      if (lineNumber !== null) {
        const change = changes.find(
          (change: any) => change.newLineNumber === lineNumber
        );
        if (change) {
          const changeKey = getChangeKey(change);
          widgets[changeKey] = (
            <div className="text-state-failure p-l">{error.message}</div>
          );
        }
      }
    });

    return widgets;
  };
  console.log(files);
  return (
    <div>
      {files.map(({ hunks }, i) => (
        <Diff
          diffType={show ? "delete" : "modify"}
          key={i}
          hunks={hunks}
          widgets={getWidgets(hunks)}
          viewType="split"
          className="diff"
        />
      ))}
    </div>
  );
}

export default App;
